<template>
  <div class="wechat-menu-container" v-loading="loading">
    <div class="menu-header">
      <h2>微信公众号菜单管理</h2>
      <div class="menu-actions" >
        <el-button type="primary" @click="publish" :loading="saveLoading">发布</el-button>
        <el-button @click="save" :loading="saveLoading">保存</el-button>
      </div>
    </div>

    <div class="menu-content">
      <!-- 菜单列表区域 -->
      <div class="menu-list">
        <div class="list-header">
          <h3>菜单列表</h3>
          <el-button
            type="primary"
            @click="openAddMainMenuDialog"
            :disabled="menus.length >= 3"
          >
            <el-icon><Plus /></el-icon> 添加主菜单
          </el-button>
        </div>

        <div class="menus-wrapper">
          <!-- 主菜单列表 -->
         
          <div v-for="(menu, index) in menus" :key="index" class="menu-item">
            <div class="menu-main-info">
              <div class="menu-name">{{ menu.name || "未命名菜单" }}</div>
              <div class="menu-type">{{ getMenuTypeText(menu.type) }}</div>
            </div>
            <div class="menu-main-actions">
              <el-button
                type="primary"
                size="small"
                @click="openAddSubMenuDialog(index)"
                :disabled="getSubMenuCount(menu) >= 5"
              >
                添加子菜单
              </el-button>
              <el-button size="small" @click="openEditMenuDialog('main', index)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteMainMenu(index)"
                :disabled="menus.length <= 1"
                >删除</el-button
              >
            </div>

            <!-- 子菜单列表 -->
            <div class="sub-menu-list" v-if="getSubMenuCount(menu) > 0">
              <div
                v-for="(subMenu, subIndex) in menu.sub_button"
                :key="subIndex"
                class="sub-menu-item"
              >
                <div class="sub-menu-info">
                  <div class="sub-menu-name">
                    {{ subMenu.name || "未命名子菜单" }}
                  </div>
                  <div class="sub-menu-type">
                    {{ getMenuTypeText(subMenu.type) }}
                  </div>
                </div>
                <div class="sub-menu-actions">
                  <el-button
                    size="small"
                    @click="openEditMenuDialog('sub', index, subIndex)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteSubMenu(index, subIndex)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="menu-tips" v-if="menus.length >= 3">
          <el-alert title="提示" type="info" :closable="false" show-icon>
            微信公众号最多支持3个主菜单，每个主菜单最多支持5个子菜单
          </el-alert>
        </div>
      </div>

      <!-- 手机预览区域 -->
      <div class="menu-preview">
        <div class="preview-header">
          <!-- <h3>手机预览</h3> -->
        </div>

        <!-- 手机模拟器 -->
        <div class="phone-simulator">
          <div class="phone-header">
            <div class="phone-speaker"></div>
            <div class="phone-camera"></div>
          </div>
          <div class="phone-content">
            <!-- 公众号头部 -->
            <div class="wechat-header">
              <div class="wechat-avatar">
                <img
                  src="@/assets/image/gzh.png"
                  alt="公众号头像"
                />
              </div>
              <div class="wechat-info">
                <div class="wechat-name">示例公众号</div>
                <div class="wechat-subscription">服务号</div>
              </div>
              <div class="wechat-more">...</div>
            </div>

            <!-- 菜单预览 -->
            <div class="wechat-menu-preview">
              <!-- 主菜单区域 -->
              <div class="main-menu-preview" v-if="menus.length > 0">
                <div
                  v-for="(menu, index) in menus"
                  :key="index"
                  class="main-menu-preview-item"
                  @click="toggleSubMenu(index)"
                >
                  <template v-if="menu.sub_button?.length">
                    <el-popover
                      placement="top"
                      :width="100"
                      trigger="click"
                      offset="30"
                    >
                      <template #reference>
                        <div class="menu-text">
                          {{ menu.name || `菜单${index + 1}` }}
                        </div>
                        <div class="menu-arrow">
                          <i :class="{ rotate: activeMenuIndex === index }"
                            >▼</i
                          >
                        </div>
                      </template>
                      <div>
                        <div
                          v-for="(subMenu, subIndex) in menu.sub_button"
                          :key="subIndex"
                          class="sub-menu-preview-item"
                        >
                          <div class="sub-menu-text">
                            {{ subMenu.name || `子菜单${subIndex + 1}` }}
                          </div>
                        </div>
                      </div>
                    </el-popover>
                  </template>
                  <template v-else>
                    <div class="menu-text">
                      {{ menu.name || `菜单${index + 1}` }}
                    </div>
                  </template>
                </div>
              </div>

              <!-- 子菜单区域 -->
              <!-- <div v-if="activeMenuIndex !== -1 && getSubMenuCount(menus[activeMenuIndex]) > 0" class="sub-menu-preview">
                <div
                  v-for="(subMenu, subIndex) in menus[activeMenuIndex].sub_button"
                  :key="subIndex"
                  class="sub-menu-preview-item"
                >
                
                  <div class="sub-menu-text">{{ subMenu.name || `子菜单${subIndex + 1}` }}</div>
                </div>
              </div> -->
            </div>
          </div>
          <div class="phone-footer">
            <div class="phone-home-button"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑主菜单弹窗 -->
    <el-dialog
      v-model="menuDialog.visible"
      :title="
        menuDialog.isEdit
          ? '编辑菜单'
          : menuDialog.isSub
          ? '添加子菜单'
          : '添加主菜单'
      "
      width="500px"
      @close="resetMenuDialog"
    >
      <el-form
        ref="menuFormRef"
        :model="menuForm"
        :rules="menuRules"
        label-width="100px"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input
            v-model="menuForm.name"
            placeholder="请输入菜单名称"
            :maxlength="menuDialog.isSub ? 16 : 8"
            show-word-limit
          />
          <div class="form-tip">主菜单最多8个汉字，子菜单最多16个汉字</div>
        </el-form-item>

        <el-form-item label="菜单类型" prop="type">
          <el-select
            v-model="menuForm.type"
            placeholder="请选择菜单类型"
            @change="handleMenuTypeChange"
          >
            <el-option label="点击推事件" value="click" />
            <el-option label="跳转URL" value="view" />
            <el-option label="扫码推事件" value="scancode_push" />
            <el-option label="扫码推事件且弹出" value="scancode_waitmsg" />
            <el-option label="弹出系统拍照发图" value="pic_sysphoto" />
            <el-option label="弹出拍照或者相册" value="pic_photo_or_album" />
            <el-option label="弹出微信相册发图器" value="pic_weixin" />
            <el-option label="弹出地理位置选择器" value="location_select" />
            <el-option label="发送小程序" value="miniprogram" />
          </el-select>
        </el-form-item>

        <!-- 根据菜单类型显示不同的配置项 -->
        <el-form-item v-if="menuForm.type === 'click'" label="键值" prop="key">
          <el-input
            v-model="menuForm.key"
            placeholder="请输入菜单KEY值，用于消息接口推送"
          />
        </el-form-item>

        <el-form-item
          v-if="menuForm.type === 'view'"
          label="网页链接"
          prop="url"
        >
          <el-input v-model="menuForm.url" placeholder="请输入网页链接" />
        </el-form-item>

        <el-form-item
          v-if="
            [
              'scancode_push',
              'scancode_waitmsg',
              'pic_sysphoto',
              'pic_photo_or_album',
              'pic_weixin',
              'location_select',
            ].includes(menuForm.type)
          "
          label="键值"
          prop="key"
        >
          <el-input
            v-model="menuForm.key"
            placeholder="请输入菜单KEY值，用于消息接口推送"
          />
        </el-form-item>

        <el-form-item
          v-if="menuForm.type === 'miniprogram'"
          label="小程序AppID"
          prop="appid"
        >
          <el-input
            v-model="menuForm.appid"
            placeholder="请输入小程序的AppID"
          />
        </el-form-item>

        <el-form-item
          v-if="menuForm.type === 'miniprogram'"
          label="页面路径"
          prop="pagepath"
        >
          <el-input
            v-model="menuForm.pagepath"
            placeholder="请输入小程序的页面路径"
          />
        </el-form-item>

        <el-form-item
          v-if="menuForm.type === 'miniprogram'"
          label="访问链接"
          prop="url"
        >
          <el-input
            v-model="menuForm.url"
            placeholder="请输入不支持小程序时的跳转链接"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="menuDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="confirmMenuDialog">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 确认对话框 -->
    <el-dialog
      v-model="confirmDialog.visible"
      :title="confirmDialog.title"
      width="300px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="confirm-content">{{ confirmDialog.content }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="confirmAction">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox, $imageBaseUrl } =
  globalProperties;

// 模拟从API获取的菜单数据
let menus = ref([]);

// 激活的菜单索引（用于预览时展开子菜单）
const activeMenuIndex = ref(-1);

// 菜单对话框状态
const menuDialog = reactive({
  visible: false,
  isEdit: false,
  isSub: false,
  menuIndex: -1,
  subIndex: -1,
});

// 菜单表单数据
const menuForm = reactive({
  name: "",
  type: "",
  key: "",
  url: "",
  appid: "",
  pagepath: "",
});

// 菜单表单引用
const menuFormRef = ref(null);

// 菜单表单验证规则
const menuRules = {
  name: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    {
      max: menuDialog.isSub ? 16 : 8,
      message: menuDialog.isSub
        ? "子菜单名称不能超过16个字符"
        : "主菜单名称不能超过8个字符",
      trigger: "blur",
    },
  ],
  type: [{ required: true, message: "请选择菜单类型", trigger: "change" }],
  key: [
    {
      required: true,
      message: "请输入键值",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (
          [
            "click",
            "scancode_push",
            "scancode_waitmsg",
            "pic_sysphoto",
            "pic_photo_or_album",
            "pic_weixin",
            "location_select",
          ].includes(menuForm.type) &&
          !value
        ) {
          callback(new Error("请输入键值"));
        } else {
          callback();
        }
      },
    },
  ],
  url: [
    {
      required: true,
      message: "请输入网页链接",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (["view", "miniprogram"].includes(menuForm.type) && !value) {
          callback(new Error("请输入网页链接"));
        } else {
          callback();
        }
      },
    },
    {
      // 必须https 或者 http开头的正则表达式
      pattern: /^(https?:\/\/)/,
      message: "链接必须以http://或https://开头",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (["view"].includes(menuForm.type) && !value) {
          callback(new Error("链接必须以http://或https://开头"));
        } else {
          callback();
        }
      },
    }
  ],
  appid: [
    {
      required: true,
      message: "请输入小程序AppID",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (menuForm.type === "miniprogram" && !value) {
          callback(new Error("请输入小程序AppID"));
        } else {
          callback();
        }
      },
    }
    
  ],
  pagepath: [
    {
      required: true,
      message: "请输入小程序页面路径",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (menuForm.type === "miniprogram" && !value) {
          callback(new Error("请输入小程序页面路径"));
        } else {
          callback();
        }
      },
    },
  ],
};

// 确认对话框状态
const confirmDialog = reactive({
  visible: false,
  title: "",
  content: "",
  action: "",
  params: null,
});

// 获取子菜单数量
const getSubMenuCount = (menu) => {
  return menu.sub_button ? menu.sub_button.length : 0;
};

// 获取菜单类型文本
const getMenuTypeText = (type) => {
  const typeMap = {
    click: "点击推事件",
    view: "跳转URL",
    scancode_push: "扫码推事件",
    scancode_waitmsg: "扫码推事件且弹出",
    pic_sysphoto: "弹出系统拍照发图",
    pic_photo_or_album: "弹出拍照或者相册",
    pic_weixin: "弹出微信相册发图器",
    location_select: "弹出地理位置选择器",
    miniprogram: "发送小程序",
  };
  return type ? typeMap[type] || type : "未设置";
};

// 打开添加主菜单对话框
const openAddMainMenuDialog = () => {
  resetMenuDialog();
  menuDialog.visible = true;
  menuDialog.isSub = false;
};

// 打开添加子菜单对话框
const openAddSubMenuDialog = (menuIndex) => {
  resetMenuDialog();
  menuDialog.visible = true;
  menuDialog.isSub = true;
  menuDialog.menuIndex = menuIndex;
};

// 打开编辑菜单对话框
const openEditMenuDialog = (type, menuIndex, subIndex = -1) => {
  resetMenuDialog();
  menuDialog.visible = true;
  menuDialog.isEdit = true;
  menuDialog.menuIndex = menuIndex;

  if (type === "sub") {
    menuDialog.isSub = true;
    menuDialog.subIndex = subIndex;
    Object.assign(menuForm, { ...menus.value[menuIndex].sub_button[subIndex] });
  } else {
    menuDialog.isSub = false;
    Object.assign(menuForm, { ...menus.value[menuIndex] });
    // 移除sub_button属性，避免编辑主菜单时影响子菜单
    delete menuForm.sub_button;
  }
};

// 重置菜单对话框
const resetMenuDialog = () => {
  menuDialog.visible = false;
  menuDialog.isEdit = false;
  menuDialog.isSub = false;
  menuDialog.menuIndex = -1;
  menuDialog.subIndex = -1;

  // 重置表单数据
  Object.keys(menuForm).forEach((key) => {
    menuForm[key] = "";
  });

  // 重置表单验证
  if (menuFormRef.value) {
    menuFormRef.value.resetFields();
  }
};

// 处理菜单类型变化
const handleMenuTypeChange = () => {
  // 清除不需要的字段
  const fields = ["key", "url", "appid", "pagepath"];
  fields.forEach((field) => {
    if (
      (menuForm.type === "click" && field !== "key") ||
      (menuForm.type === "view" && field !== "url") ||
      (menuForm.type === "miniprogram" &&
        !["appid", "pagepath", "url"].includes(field)) ||
      ([
        "scancode_push",
        "scancode_waitmsg",
        "pic_sysphoto",
        "pic_photo_or_album",
        "pic_weixin",
        "location_select",
      ].includes(menuForm.type) &&
        field !== "key")
    ) {
      menuForm[field] = "";
    }
  });
};

// 确认菜单对话框
const confirmMenuDialog = () => {
  menuFormRef.value.validate((valid) => {
    if (!valid) {
      return;
    }

    // 复制表单数据
    const menuData = { ...menuForm };

    if (menuDialog.isEdit) {
      // 编辑菜单
      if (menuDialog.isSub) {
        // 编辑子菜单
        menus.value[menuDialog.menuIndex].sub_button[menuDialog.subIndex] = menuData;
      } else {
        // 编辑主菜单，如果有子菜单则保留
        const subButton = menus.value[menuDialog.menuIndex].sub_button;
        menus.value[menuDialog.menuIndex] = menuData;
        if (subButton && subButton.length > 0) {
          menus.value[menuDialog.menuIndex].sub_button = subButton;
        }
      }
      // ElMessage.success("菜单编辑成功");
    } else {
      // 新增菜单
      if (menuDialog.isSub) {
        // 新增子菜单
        if (!menus.value[menuDialog.menuIndex].sub_button) {
          menus.value[menuDialog.menuIndex].sub_button = [];
        }
        menus.value[menuDialog.menuIndex].sub_button.push(menuData);
        // ElMessage.success("子菜单添加成功");
      } else {
        // 新增主菜单
        menus.value.push(menuData);
        // ElMessage.success("主菜单添加成功");
      }
    }

    // 关闭对话框
    menuDialog.visible = false;
  });
};

// 打开确认对话框
const openConfirmDialog = (title, content, action, params) => {
  confirmDialog.title = title;
  confirmDialog.content = content;
  confirmDialog.action = action;
  confirmDialog.params = params;
  // confirmDialog.visible = true;
};

// 确认操作
const confirmAction = () => {
  const { action, params } = confirmDialog;

  switch (action) {
    case "deleteMainMenu":
      deleteMainMenuConfirm(params);
      break;
    case "deleteSubMenu":
      deleteSubMenuConfirm(params);
      break;
    default:
      break;
  }

  confirmDialog.visible = false;
};

// 删除主菜单
const deleteMainMenu = (index) => {
  openConfirmDialog(
    "确认删除",
    "确定要删除这个主菜单吗？",
    "deleteMainMenu",
    index
  );
   ElMessageBox.confirm("确定要删除这个主菜单吗？", "确认删除").then(() => {
    confirmAction();
  })
};

// 确认删除主菜单
const deleteMainMenuConfirm = (index) => {
  menus.value.splice(index, 1);
  // ElMessage.success("主菜单删除成功");
  // 如果删除的是当前激活的菜单，重置激活状态
  if (activeMenuIndex.value === index) {
    activeMenuIndex.value = -1;
  }
};

// 删除子菜单
const deleteSubMenu = (menuIndex, subIndex) => {
  openConfirmDialog("确认删除", "确定要删除这个子菜单吗？", "deleteSubMenu", {
    menuIndex,
    subIndex,
  });
  ElMessageBox.confirm("确定要删除这个子菜单吗？", "确认删除").then(() => {
    confirmAction();
  })
};

// 确认删除子菜单
const deleteSubMenuConfirm = ({ menuIndex, subIndex }) => {
  menus.value[menuIndex].sub_button.splice(subIndex, 1);
  // ElMessage.success("子菜单删除成功");
};

// 切换子菜单显示
const toggleSubMenu = (index) => {
  if (getSubMenuCount(menus.value[index]) > 0) {
    activeMenuIndex.value = activeMenuIndex.value === index ? -1 : index;
  }
};

// 保存菜单
const save = () => {
  // 验证所有菜单名称
  const hasEmptyMenu = menus.value.some((menu) => !menu.name || !menu.name.trim());
  if (hasEmptyMenu) {
    ElMessage.warning("请完善所有主菜单名称");
    return;
  }

  // 验证所有子菜单名称
  const hasEmptySubMenu = menus.value.some((menu) => {
    return (
      menu.sub_button &&
      menu.sub_button.some((subMenu) => !subMenu.name || !subMenu.name.trim())
    );
  });
  if (hasEmptySubMenu) {
    ElMessage.warning("请完善所有子菜单名称");
    return;
  }

  // 验证所有菜单类型
  const hasEmptyType = menus.value.some((menu) => !menu.type);  
  if (hasEmptyType) {
    ElMessage.warning("请设置所有主菜单的类型");
    return;
  }

  // 验证所有子菜单类型
  const hasEmptySubType = menus.value.some((menu) => {
    return menu.sub_button && menu.sub_button.some((subMenu) => !subMenu.type);
  });
  if (hasEmptySubType) {
    ElMessage.warning("请设置所有子菜单的类型");
    return;
  }
  ElMessageBox.confirm("菜单保存后将覆盖旧的的菜单数据，但是不影响公众号上菜单显示，确认保存？", "确认保存").then(() => {
    $http
      .post(
        `business/config/save?authCode=FUNCTION_WECHAT_MENU&code=CONFIG_GROUP_WECHAT_MENU`,
        {
          wechat_menus: menus.value,
        }
      )
      .then((res) => {
        if (res.status == "success") {
          $ekMessage.success("操作成功");
        }
      });
  });
  console.log("保存菜单:", menus.value);
};

// 发布菜单
const publish = () => {

  // 模拟保存到微信的API调用
  ElMessageBox.confirm(
    "菜单需先保存后发布，确定要发布菜单到微信公众号吗？发布后24小时后将对所有用户生效。",
    "确认发布",
  )
    .then(() => {
      // 这里应该是实际的API调用
        saveLoading.value = true;
      $http
      .post(
        `business/config/publish?authCode=FUNCTION_WECHAT_MENU`,
        {
        }
      )
      .then((res) => {
        if (res.status == "success") {
          ElMessage.success("菜单发布成功，微信公众号菜单已更新");
        }
      }).finally(() => {
        saveLoading.value = false;
      });
 
    })
    .catch(() => {
      ElMessage.info("已取消保存");
    })
   
};

const saveLoading = ref(false);
const loading = ref(false);
const init = () => {
  loading.value = true;
  $http
    .get(`business/config/getConfigWechatMenu?authCode=FUNCTION_WECHAT_MENU`, {
      params: { code: "CONFIG_GROUP_WECHAT_MENU" },
    })
    .then((res) => {
      if (res.status === "success") {
        if (res.data.list?.length) {
          menus.value =
            res.data.list.filter(
              (item) => item.config_key === "wechat_menus"
            )[0].config_value || [];
          console.log(menus.value, "111");
        }
         loading.value = false;
      }
    })
    .finally(() => {
     
    });
};

onMounted(async () => {
  init();
});
</script>

<style scoped lang="scss">
.wechat-menu-container {
  padding: 16px;
  // min-height: 100vh;
  background-color: #f5f7fa;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  h2 {
    margin: 0;
    color: #333;
  }
  .menu-actions {
    display: flex;
    // gap: 10px;
  }
}

.menu-content {
  display: flex;
  gap: 20px;
}

.menu-list {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    h3 {
      margin: 0;
      color: #333;
    }
  }
  .menus-wrapper {
    .menu-item {
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      margin-bottom: 15px;
      overflow: hidden;
      .menu-main-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background-color: #fafafa;
        .menu-name {
          font-weight: bold;
          color: #333;
        }
        .menu-type {
          font-size: 12px;
          color: #909399;
        }
      }
      .menu-main-actions {
        display: flex;
        gap: 8px;
        padding: 0 15px 15px 15px;
      }
      .sub-menu-list {
        border-top: 1px solid #e4e7ed;
        .sub-menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 15px;
          border-bottom: 1px solid #f0f0f0;
          &:last-child {
            border-bottom: none;
          }
          .sub-menu-info {
            .sub-menu-name {
              color: #606266;
              margin-bottom: 4px;
            }
            .sub-menu-type {
              font-size: 12px;
              color: #909399;
            }
          }
          .sub-menu-actions {
            display: flex;
            gap: 8px;
          }
        }
      }
    }
  }
  .menu-tips {
    margin-top: 15px;
  }
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.confirm-content {
  text-align: center;
  padding: 20px 0;
}

/* 预览区域样式 */
.menu-preview {
  width: 380px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  .preview-header {
    margin-bottom: 15px;
    h3 {
      margin: 0;
      color: #333;
    }
  }
  .phone-simulator {
    flex-shrink: 0;
    min-width: 360px;
    height: 700px;
    border: 12px solid #333;
    border-radius: 35px;
    background: white;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;

    .phone-header {
      height: 44px;
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      .phone-speaker {
        width: 60px;
        height: 5px;
        background: #222;
        border-radius: 2px;
        position: absolute;
        top: 15px;
      }
      .phone-camera {
        width: 12px;
        height: 12px;
        background: #222;
        border-radius: 50%;
        border: 1px solid #444;
        position: absolute;
        top: 15px;
        right: 80px;
      }
    }
    .phone-content {
      height: calc(100% - 44px - 60px);
      overflow-y: auto;
    }
    .wechat-header {
      display: flex;
      align-items: center;
      padding: 15px;
      background: #f8f8f8;
      border-bottom: 1px solid #e4e7ed;
      .wechat-avatar {
        img {
          width: 48px;
          height: 48px;
          border-radius: 5px;
        }
      }
      .wechat-info {
        text-align: left;
        margin-left: 10px;
        flex: 1;
        .wechat-name {
          font-weight: bold;
          color: #333;
        }
        .wechat-subscription {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
        }
      }
      .wechat-more {
        color: #909399;
        font-size: 18px;
      }
    }
    .wechat-menu-preview {
      position: absolute;
      width: 100%;
      bottom: 62px;
      .main-menu-preview {
        display: flex;
        border-top: 1px solid #e4e7ed;
        .main-menu-preview-item {
          flex: 1;
          text-align: center;
          padding: 15px 5px;
          cursor: pointer;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 3px;
          &:hover {
            background: #f5f5f5;
          }
          .menu-text {
            font-size: 14px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .menu-arrow {
            font-size: 10px;
            color: #909399;
            transition: transform 0.3s;
            i {
              transition: transform 0.3s;
              &.rotate {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
    }
    .phone-footer {
      height: 60px;
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      .phone-home-button {
        width: 40px;
        height: 40px;
        border: 2px solid #555;
        border-radius: 50%;
        background: #222;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .menu-content {
    flex-direction: column;
  }
  .menu-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
<style>
.sub-menu-preview-item {
  cursor: pointer;
  text-align: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
  .sub-menu-text {
    font-size: 14px;
    color: #333;
    text-align: center;
  }
}
</style>
